<template>
    <view class="tools-container l-class" @touchmove.stop.prevent="trueFun" :style="'z-index: ' + zIndex + ';'">
        <view class="tools-form">
            <view v-if="lockWidth">
                锁定裁剪框宽
                <switch :model:checked="lockWidthValue" :color="formColor" @change="bindSwitchChange" data-type="lockWidth" />
            </view>
            <view v-if="lockHeight">
                锁定裁剪框高
                <switch :model:checked="lockHeightValue" :color="formColor" @change="bindSwitchChange" data-type="lockHeight" />
            </view>
            <view v-if="lockRatio">
                锁定裁剪框比例
                <switch :model:checked="lockRatioValue" :color="formColor" @change="bindSwitchChange" data-type="lockRatio" />
            </view>
            <view v-if="limitMove">
                限制移动范围
                <switch :model:checked="limitMoveValue" :color="formColor" @change="bindSwitchChange" data-type="limitMove" />
            </view>
            <view v-if="disableScale">
                禁止缩放
                <switch :model:checked="disableScaleValue" :color="formColor" @change="bindSwitchChange" data-type="disableScale" />
            </view>
            <view v-if="disableRotate">
                禁止旋转
                <switch :model:checked="disableRotateValue" :color="formColor" @change="bindSwitchChange" data-type="disableRotate" />
            </view>
        </view>
    </view>
</template>

<script>
export default {
    unicomGroup: ['image-clipper'],
    data() {
        return {
            formColor: '#3963bc',
            lockWidthValue: false,
            lockHeightValue: false,
            lockRatioValue: true,
            disableScaleValue: false,
            disableRotateValue: false,
            limitMoveValue: false
        };
    },
    relations: {
        '../image-clipper/index': {
            type: 'parent'
        }
    },
    externalClasses: ['l-class'],
    props: {
        zIndex: {
            type: Number,
            default: 999
        },
        lockWidth: {
            type: Boolean,
            default: false
        },
        lockHeight: {
            type: Boolean,
            default: false
        },
        lockRatio: {
            type: Boolean,
            default: false
        },
        disableScale: {
            type: Number,
            default: false
        },
        disableRotate: {
            type: Number,
            default: false
        },
        limitMove: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        bindSwitchChange: async function (e) {
            const a = e.detail.value;
            const l = e.currentTarget.dataset.type;
            let t = this.getRelationNodes('image-clipper')[0];
            await t.setData({
                [l]: a
            });
        }
    },
    created: function () {}
};
</script>
<style>
.tools-container {
    width: 100%;
    padding: 20rpx 40rpx;
    box-sizing: border-box;
}
.tools-container .tools-form {
    margin-top: 20rpx;
    display: flex;
    flex-wrap: wrap;
    color: #fff;
}
.tools-container .tools-form .slider-wrapper {
    display: flex;
    align-items: center;
}
.tools-container .tools-form switch {
    transform: scale(0.7);
}
</style>
